<template>
	<view class="cardConent">
		<view class="" v-for="i in projectList">
			<view class="card" @click="toPage()">
				<view class="">{{ i.name }}</view>
				<view class="mgt20 mgb20">负责: {{ i.fname }}</view>
				<view class="fs28 c9">介绍: {{ i.tip }}</view>
			</view>
		</view>
	</view>
	<!-- <view class="pd40">
		<table style="border: 1px solid green">
			<tr>
				<td>lm</td>
				<td>ym</td>
				<td>wz</td>
				<td>cz</td>
				<td>fman</td>
				<td>gman</td>
				<td>sate</td>
			</tr>
			<tr>
				<td>lm</td>
				<td></td>
				<td></td>
				<td>cz</td>
				<td>fman</td>
				<td>gman</td>
				<td>sate</td>
			</tr>
			<tr>
				<td></td>
				<td>ym</td>
				<td></td>
				<td>cz</td>
				<td>fman</td>
				<td>gman</td>
				<td>sate</td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td>wz</td>
				<td>cz</td>
				<td>fman</td>
				<td>gman</td>
				<td>sate</td>
			</tr>
		</table>
	</view> -->
</template>

<script setup>
import { reactive } from 'vue';
const projectList = reactive([
	{ name: '项目1', fname: '负责人', tip: '一些介绍' },
	{ name: '项目2', fname: '负责人', tip: '一些介绍' },
	{ name: '项目3', fname: '负责人', tip: '一些介绍' }
]);

function toPage() {
	uni.navigateTo({
		url: '/pages/index/projectTeam'
	});
}
</script>

<style lang="scss">
table {
	$set: 4;
	tr {
		width: 200rpx;
		border: 1px solid red;

		td {
			width: 200rpx;
			border: 1px solid red;
		}
		&:nth-child(2) {
			td {
				&:nth-child(2),
				&:nth-child(3) {
					background-color: red;
				}
			}
		}
		// @for $x from 2 through $set {
		// 	&:nth-child(#{$x}) {
		// 		td {
		// 			&:nth-child(n + #{$x}),
		// 			&:not(&:nth-child(1), &:nth-child(2), &:nth-child(3)) {
		// 				background-color: red;
		// 			}
		// 		}
		// 	}
		// }
	}
}
@media (max-width: 500px) {
	$set: 4;
	table {
		display: flex;
		tr {
			display: flex;
			flex-direction: column;
			&:nth-child(1) {
				display: none;
			}
			@for $x from 2 through $set {
				&:nth-child(n + #{$x}) {
					td {
						&:not(&:nth-child(#{$x}), &:nth-child(4), &:nth-child(5), &:nth-child(6)) {
							display: none;
						}
					}
				}
			}
		}
	}
}
</style>
